<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例</title>

    <script src="./../vue/vue.js"></script>
</head>
<body>

    <div id="app">
        <div>{{ message }}</div>

        <!-- 四个生命周期 8个生命周期函数
            创建 beforeCreate   created     new 之后就创建了
            挂载 beforeMount    mounted     使用el 挂载， 或者 mv.$mount() 挂载
            更新 beforeUpdate   updated     更新data数据时更新
            销毁 beforeDestroy  destroyed   组件销毁，或者手动调用mc.$destroy()销毁时走的回调
         -->
        <div>
            <div>{{ text }}</div>

            <div>
                <input type="button" value="点击" @click="changeText">
            </div>

        </div>


    </div>

    <!-- 
        1、vue 实现了 双向绑定


        2、每个Vue实例都有自己的生命周期
        

            创建 ——————>>> 挂载    ————————————————————————>>> 销毁
                                    |               |
                                    |               |
                                    |               |
                                    —————更新数据—————

            创建 beforeCreate   created     new 之后就创建了
            挂载 beforeMount    mounted     使用el 挂载， 或者 mv.$mount() 挂载
            更新 beforeUpdate   updated     更新data数据时更新
            销毁 beforeDestroy  destroyed   组件销毁，或者手动调用 mv.$destroy()销毁时走的回调

            beforeCreate
            created

            beforeMount
            mounted

            beforeUpdate
            updated

            beforeDestroy
            destroyed

     -->
    <script>
        // vue 将数据 data 和 视图 进行了双向绑定
        let data = {
            message: "你好",
            text: null
        }

        let num = 0

        let obj = {
            // el: "#app",
            data: data,
            methods: {
                changeText(){
                    this.text = ++num
                }
            },
            // 创建前
            beforeCreate() {
                
                console.log("beforeCreate", this)
            },

            // 创建后
            created() {
                console.log("created", this)
            },

            // 挂载前
            beforeMount() {
                console.log("beforeMount", this)
            },
            // 挂载后
            mounted() {
                console.log("mounted", this)
            },

            // 数据改变前
            beforeUpdate() {
                console.log("beforeUpdate", this)
            },

            updated() {
                console.log("updated", this)
            },

            // vm销毁前
            beforeDestroy() {
                console.log("beforeDestroy", this)
            },

            destroyed() {
                console.log("destroyed", this)
            },
        }

        let vm = new Vue(obj)

        vm.$mount("#app")


        /*
            观察发现 this 打印的并不是obj本身，而是 由 new 构造出来的vm对象本身
        */
    </script>
</body>
</html>